document.addEventListener("DOMContentLoaded", function() {
    // 获取要插入思维导图的元素
    var mindMapContainer = document.getElementById("mindMap");
   
    // 创建思维导图的数据结构
    var mindMapData = {
      id: 1,
      topic: "Main Topic",
      children: [
        {
          id: 2,
          topic: "Subtopic 1",
          children: [
            {
              id: 4,
              topic: "Subtopic 1.1",
              children: []
            },
            {
              id: 5,
              topic: "Subtopic 1.2",
              children: []
            }
          ]
        },
        {
          id: 3,
          topic: "Subtopic 2",
          children: []
        }
      ]
    };
   
    // 调用绘制思维导图的函数
    drawMindMap(mindMapContainer, mindMapData);
  });
   
  function drawMindMap(container, data) {
    // 创建主题元素
    var topicElement = document.createElement("div");
    topicElement.classList.add("node");
    topicElement.textContent = data.topic;
   
    // 添加主题元素到容器中
    container.appendChild(topicElement);
   
    // 递归处理子主题
    data.children.forEach(function(childData) {
      var childContainer = document.createElement("div");
      childContainer.classList.add("node-container");
      container.appendChild(childContainer);
   
      // 创建连线元素
      var lineElement = document.createElement("div");
      lineElement.classList.add("line");
      container.appendChild(lineElement);
   
      // 递归绘制子主题
      drawMindMap(childContainer, childData);
    });
  }